<template>
  <div class="choice_city_box" v-if="partListCon">
    <div class="choice_city_box_part1">
      <p>国内机票</p>
      <img src="@/assets/img/plane/line.png" alt="" />
    </div>
    <div class="choice_city_box_part2">
      <p>福州</p>
      <img src="@/assets/img/plane/plane.png" alt="" />
      <p>上海</p>
    </div>
    <div class="choice_city_box_part3">
      <p>05月18日</p>
      <p>明天</p>
    </div>
    <div class="choice_city_box_part4">
      <div>搜索机票</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  components: {},
  props: {
    index: {
      type: Number,
      default: -1,
    },
  },
  computed: {
    ...mapState({
      active: (state) => state.modulePage.active,
      bannerNowIndex: (state) => state.modulePage.bannerNowIndex || 0,
      allbanner: (state) => state.modulePage.allbanner,
      partListCon() {
        if (this.index >= 0) {
          if (this.allbanner[this.index].text > 0) {
            this.getnewslist(this.allbanner[this.index].text);
          }
          return this.allbanner[this.index];
        } else {
          return {};
        }
      },
    }),
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.choice_city_box {
  width: 96%;
  padding: 12px 15px 20px;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 8px;
  .choice_city_box_part1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    > p {
      font-size: 15px;
      font-weight: bold;
      color: #010101;
    }
    > img {
      margin-top: 1px;
      width: 40px;
    }
  }
  .choice_city_box_part2 {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > p {
      flex: 1;
      opacity: 1;
      font-size: 19px;
      font-weight: bold;
      color: #010101;
      padding-bottom: 11px;
      border-bottom: 1px solid #f4f4f4;
    }
    > p:last-of-type {
      text-align: right;
    }
    > img {
      width: 33px;
      height: 33px;
    }
  }
  .choice_city_box_part3 {
    display: flex;
    align-items: center;
    height: 53px;
    border-bottom: 1px solid #f4f4f4;
    > p:first-of-type {
      font-size: 16px;
      font-weight: bold;
      color: #010101;
    }
    > p:last-of-type {
      margin-left: 5px;
      font-size: 14px;
      color: #5e5e5e;
    }
  }

  .choice_city_box_part4 {
    margin-top: 22px;
    display: flex;
    > div {
      width: 100%;
      background-color: #f9db3b;
      text-align: center;
      border-radius: 20px;
      height: 44px;
      line-height: 44px;
      font-size: 17px;
    }
  }
}
</style>
